<!--
 * @Author: 姚杰鸿 adolphus520@163.com
 * @Date: 2024-10-30 17:07:16
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-07 11:18:29
 * @Description: file content
-->
<template>
  <div>
    <el-row class="row-bg" justify="end">
      <SunMoonSwBtn />
    </el-row>
    <ThemeSelect />
    <div class="login-wrap">
      <el-container ref="loginContainer">
        <el-header><span class="main_title">MDs 实验系统</span></el-header>
        <el-main>
          <el-row class="row-bg" justify="center">
            <router-view v-slot="{ Component, route }">
              <transition name="scale" mode="out-in">
                <keep-alive>
                  <component :is="Component" :key="route.path" />
                </keep-alive>
              </transition>
            </router-view>
          </el-row>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useResizeObserver } from "@vueuse/core";

const loginContainer = ref<HTMLElement>(),
  loginContainerHeight = ref("500px");

useResizeObserver(loginContainer, (entries) => {
  const entry = entries[0];
  const { height } = entry.contentRect;
  loginContainerHeight.value = `${height}px`;
});
</script>

<style lang="scss" scoped>
.login-wrap {
  position: fixed;
  height: v-bind("loginContainerHeight");
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}
</style>
